<template>
	<div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;">
		<pheader style="border-bottom: 1px solid #dcdae2; ">
			<div  slot="left">业务账号配置</div>
			<div style="float:right;position: relative;font-weight: normal;" slot="right">
				<Row>
					<Col span="23" style="padding-left:12px">
						<Input v-model="params.param" search placeholder="请输入账号模板名称" style="width: auto;" @on-search="changePage($event,0)" />
					</Col>
				</Row>
			</div>
		</pheader>
		<template style="padding: 8px 8px 0px 8px;">
			<div style="width: 100%;background-color: white;height: calc(100vh - 152px);overflow-y: auto;padding:10px;overflow-x: hidden;">
				<accounttemplate ref="accounttemplate" v-model="account" :isEdit="true"></accounttemplate>
				<div style="margin: 10px;overflow: hidden">
					<div style="float: right;">
						<Page :current="params.current" :total="params.total" show-total show-elevator show-sizer @on-change="changePage($event,1)" @on-page-size-change="changePageSize"></Page>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import Axios from 'axios'
	import ajax from "../ajax_util"
	import pheader from "../comp_chatter/pheader"
	import accounttemplate from "../comp_process/applyVue/settledin_test/accounttemplate.vue"

	export default {
		components: {
			pheader,accounttemplate
		},
		data() {
			return {
				params:{
					current:1,
					total:0,
					pageSize:10,
					param:""
				},
				account:[]
			}
		},
		computed: {
		},
		mounted() {
			this.getPageAccount();
		},
		methods: {
			getPageAccount(){
				this.$refs.accounttemplate.getPageAccount();
			},
			setParams(total){
				this.params.total = total;
			},
			setLastPage(){
				this.params.current = this.params.current -1;
			},
			changePage(data,number){
				console.log("======changePage=======",data);
				if(number == 0){
					this.params.current = 1;
				}else{
					this.params.current = data;
				}
				this.$refs.accounttemplate.getPageAccount();
			},
			changePageSize(pageSize){
				console.log("====pageSize======",pageSize);
				this.params.current = 1;
				this.params.pageSize = pageSize;
				this.$refs.accounttemplate.getPageAccount();
			}
		},
		props: {
			value: {}
		}
	}
</script>

<style>
	.demo-upload-list {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>